<template>
  <div>
    <div style="margin: 10px">购物车列表：</div>
    <div class="item" v-for="item in products" :key="item">
      <!-- 商品名称 -->
      <div>{{item}}</div>
      <!-- 商品数量 -->
      <div style="margin-left: 10px"></div>
      <MyButton type="danger" size="mini" @click="delitem(item)">删除</MyButton>
    </div>
  </div>
</template>

<script>
import MyButton from "../MyButton.vue";
export default {
  name: "Cart",
  components: { MyButton },
  inject: ["products"],
  data() {
    return {};
  },
  methods: {
    delitem(item) {
      console.log("当前删除的元素：" + item);
      this.products = this.products.filter(a => {
        return a != item;
      });
      console.log(this.products);
    }
  }
};
</script>

<style scoped>
.item {
  display: flex;
  align-items: center;
  border: 1px solid #000;
  padding: 10px;
  margin: 10px;
  width: 400px;
}
</style>